<template>
  <div id="backDialog" class="dialog" v-if="visible">
    <div class="dialog_body">
      <div class="img_1">
        <img src="../assets/back.png" alt="" @click="handleConfirm" />
      </div>
      <div class="img_2">
        <img src="../assets/continue.png" alt="" @click="handleCancel" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "../router/index";
import { clickAnimation } from "../utils/animation";

defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["close"]);

const handleConfirm = () => {
  clickAnimation("backConfirm", 200, () => {
    router.push("/home");
  });
};
const handleCancel = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.dialog {
  .dialog_body {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img_1,
    .img_2 {
      width: 100%;
      margin-bottom: 1rem;
      cursor: pointer;
    }
  }
}
</style>
